<template>
  <BorderBox10 class="h-full">
    <div class="gap-3 p-4 h-full">
      <div class="flex w-full flex-col justify-between ">
        <Title class="pt-2" :title="title"></Title>
        <div class="w-full max-h-72 mt-10 overflow-y-auto">
          <div v-for="(item, index) in list"
               :key="index" class="list px-6 text-slate-300 flex justify-between text-base h-full leading-10 "
           @click="showUser(item.IDs)" style="cursor: pointer;">
            <p class="col-span-3">{{ item.username }}</p>
            <p class="text-[#00FFFF]">{{ item.count }}</p>
          </div>
        </div>
      </div>

    </div>
  </BorderBox10>
  <el-dialog
    v-model="detailShow"
    style="width: 90%; min-width: 800px;margin-top:1vh"
    lock-scroll
    :before-close="closeDetailShow"
    title="名单"
    destroy-on-close
  >
    <div class="gva-table-box">
      <el-table
        ref="multipleTable"
        style="width: 100%"
        tooltip-effect="dark"
        :data="tableDataMD"
        row-key="ID"
      >
        <el-table-column align="center" label="姓名" prop="name" width="100">
        </el-table-column>
        <el-table-column label="性别" width="100" prop="sex" align="center">
          <template #default="scope">{{
            scope.row.sex === 1 ? "男" : "女"
          }}</template>
        </el-table-column>
        <el-table-column align="center" label="年龄" prop="age" width="120">
        </el-table-column>
        <el-table-column align="center" label="电话" prop="phone">
        </el-table-column>
        <el-table-column align="center" label="健管师" prop="healthManager">
        </el-table-column>
        <el-table-column align="center" label="服务人电话" prop="servicePhone">
        </el-table-column>
        <el-table-column align="center" label="服务站" prop="serviceStation">
        </el-table-column>
        <el-table-column align="center" label="服务中心" prop="serviceCenter">
        </el-table-column>
        <el-table-column align="center" label="省 " prop="province">
        </el-table-column>
        <el-table-column align="center" label="市" prop="city">
        </el-table-column>
        <el-table-column align="center" label="区" prop="area">
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="pageMD"
          :page-size="pageSizeMD"
          :page-sizes="[10]"
          :total="totalMD"
          @current-change="handleCurrentChangeMD"
          @size-change="handleSizeChangeMD"
        />
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { BorderBox10, Decoration8 } from '@kjgl77/datav-vue3'
import { defineProps ,ref, reactive } from 'vue'

import {useRouter} from "vue-router";
import Title from '@/view/memberManager/components/title.vue'
import { getDiseaseUserList } from "@/api/disease";


const props = defineProps({
  list: {
    type: Array,
    default: []
  },
  title: {
    type: String,
    default: ''
  }
})
const router = useRouter()
const tableDataMD = ref([]);
const pageMD = ref(1);
const totalMD = ref(0);
const pageSizeMD = ref(10);
const CardRow=ref([])
// 查看详情控制标记
const detailShow = ref(false);

// 关闭详情弹窗
const closeDetailShow = () => {
  detailShow.value = false;
  pageMD.value=1;
  pageSizeMD.value=10;
};
const showUser =async (users) => {
  if(props.title=='优秀健康管理师排名'){
     return
  }
   detailShow.value = true;
     CardRow.value=users
   const res = await getDiseaseUserList({
    uids: users,
    page: pageMD.value,
    pageSize: pageSizeMD.value,
  });
  if (res.code === 0) {
    detailShow.value = true;
    tableDataMD.value = res.data.list;
    pageMD.value = res.data.page;
    pageSizeMD.value = res.data.pageSize;
    totalMD.value = res.data.total;
  }
}
// 弹窗表格分页
const handleSizeChangeMD = (val) => {
  pageSizeMD.value = val;
  showUser(CardRow.value);
};

// 弹窗表格修改页面容量
const handleCurrentChangeMD = (val) => {
  pageMD.value = val;
  showUser(CardRow.value);
};
</script>


<style scoped>
.list {
  border-bottom: 1px solid #53749C;
}
</style>
